React Hooks
对函数型组件进⾏增强
1
2
3
4
5
. React Hooks
介绍
使⽤
. React Hooks
.
Hook
定义
⾃
⽬
录
. React
Hooks
路由
. React Hooks
原理分析
1. React Hooks
介绍
1.1 React Hooks
是⽤来做什么的
对函数型组件进⾏增强
,
让函数型组件可以存储状态
,
可以拥有处理副作⽤的能⼒
.
让开发者在不使⽤类组件的情况下
,
实现相同的功能
.
类组件的不⾜
1. React Hooks
介绍
1
.2
类组件的不⾜
(Hooks
要解决的问题
)
1
.
缺少逻辑复⽤机制
为了复⽤逻辑增加⽆实际渲染效果的组件,增加了组件层级 显示⼗分臃肿
增加了调试的难度以及运⾏效率的降低
1. React Hooks
介绍
1
.2
类组件的不⾜
(Hooks
要解决的问题
)
2
.
类组件经常会变得很复杂难以维
护
将⼀组相⼲的业务逻辑拆分到了多个⽣命周期函数中
在⼀个⽣命周期函数内存在多个不相⼲的业务逻辑
1. React Hooks
介绍
1
.2
类组件的不⾜
(Hooks
要解决的问题
)
3
.
类成员⽅法不能保
证
this
指向的正确性
useState 钩⼦函数
2. React Hooks
使⽤
Hooks
意为钩⼦
, React Hooks
就是⼀堆钩⼦函数
, React
通过这些钩⼦函数对函数型组件进⾏增强
,
不同的钩⼦函数提供了不同的功能
.
useState()
useEffects(
)
useReducer()
useRef()
useCallback()
useContext()
useMemo()
2. React Hooks
使⽤
2.1 useState()
⽤
于为函数组件引⼊状态
useState 细节
2. React Hooks
使⽤
2.1 useState()
1
2
3
4
.
接收唯⼀的参数即状态初始值
.
初始值可以是任意数据类型
.
.
返回值为数组
.
数组中存储状态值和更改状态值的⽅法
.
⽅法名称约定以
set
开头
,
后⾯加上状态名称
.
.
⽅法可以被调⽤多次
.
⽤以保存不同状态值
.
.
参数可以是⼀个函数
,
函数返回什么
,
初始状态就是什么
,
函数只会被调⽤⼀次
,
⽤在初始值是动态值的情况
.
设置状态⽅法的使⽤细节
2. React Hooks
使⽤
2.1 useState()
设置状态值⽅法的参数可以是⼀个值也可以是⼀个函数
设置状态值⽅法的⽅法本身是异步的
useReducer 钩⼦函数
2. React Hooks
使⽤
2.2 useReducer()
useReducer
是另⼀种让函数组件保存状态的
⽅式
.
2. React Hooks
使⽤
2.2 useReducer()
useContext 钩⼦函数
2. React Hooks
使⽤
2.3 useContext()
在
跨组件层级获取数据时简化获取数据的代码
.
useEffect 钩⼦函数执
⾏分析
2. React Hooks
使⽤
2.4 useEffect
()
让函数型组件拥有处理副作⽤的能⼒
.
类似⽣命周期函数
.
2. React Hooks
使⽤
2.4 useEffect
()
1. useEffect
执⾏时机
可以把
useEffect
看做
componentDidMount,
componentDidUpdate
和
componentWillUnmount
这三个函数的组合
.
useEffect(() => {})
=>
=>
=>
componentDidMount, componentDidUpdate
componentDidMount
useEffect(() => {}, [])
useEffect(() => () => {})
componentWillUnMount
useEffect 使⽤⽅式
2. React Hooks
使⽤
2.4 useEffect
()
2. useEffect
使⽤⽅法
1
2
.
为
window
对象添加滚动事件
.
设
置定时器让
c
ount
数
值每隔⼀秒增加
1
2. React Hooks
使⽤
2.4 useEffect
()
3. useEffect
解决的问
题
1
2
.
按照⽤途将代码进⾏分类
(
将⼀组相⼲的业务逻辑归置到了同⼀个副作⽤函数中
)
.
简化重复代码
,
使组件内部代码更加清晰
useEffect 数据监测
2. React Hooks
使⽤
2.4 useEffect
()
4
.
只有指定数据发⽣变化时
触发
effect
useEffect 结合异
步函数
2. React Hooks
使⽤
2.4 useEffect
()
5. useEffect
结合异步函
数
useEffect
中的参数函数不能是异步函数
,
因为
useEffect
函数要返回清理资源的函数
,
如果是异步函数就变成了返回
Promise
useMemo 钩⼦函数
2. React Hooks
使⽤
2.5 useMemo()
useMemo
的⾏为类似
Vue
中的计算属性
,
可以监测某个值的变化
,
根据变化值计算新值
.
useMemo
会缓存计算结果
.
如果监测值没有发⽣变化
,
即使组件重新渲染
,
也不会重新计算
.
此⾏为可以有助于避免在每个渲染上进⾏昂贵的计算
.
memo ⽅法
2. React Hooks
使⽤
2.6 memo
⽅法
性能优化
,
如果本组件中的数据没有发⽣变化
,
阻⽌组件更新
.
类似类组件中的
PureComponent
和
shouldComponentUpdate
useCallback 钩⼦
函数
2. React Hooks
使⽤
2.7 useCallback()
性能优化
,
缓存函数
,
使组件重新渲染时得到相同的函数实例
.
2. React Hooks
使⽤
2.7 useCallback()
性能优化
,
缓存函数
,
使组件重新渲染时得到相同的函数实例
.
useRef 钩⼦函数获取 DOM 元素
2. React Hooks
使⽤
2.8 useRef()
2
.8.1
获取
DOM
元素对象
useRef 钩⼦函数保存
数据
2. React Hooks
使⽤
2.8 useRef()
2
.8.2
保存数据
(
跨组件周期
)
即使组件重新渲染
,
保存的数据仍然还在
.
保存的数据被更改不会触发组件重新渲染
.
⾃定义 Hook 函数
3
.
⾃定义
Hook
⾃
⾃
⾃
定义
Hook
是标准的封装和共享逻辑的⽅式
.
定义
Hook
是⼀个函数
,
其名称以
use
开头
.
定义
Hook
其实就是逻辑和内置
Hook
的组合
.
⾃定义 Hook 函数实例
React 路由 Hooks
4. React
路由
Hooks
4.1 react-router-dom
路由提供的钩⼦函数
实现 useState 钩⼦函数
实现 useEffect 钩⼦函数
完成⾸⻚获取
商
品列
表的redux流
程